<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box1"></div>

    <script type="text/javascript">
        document.onkeydown = function(event) {
            event = event || window.event;
            var speed = 10;
            if (event.ctrlKey) {
                console.log('smyhvae ctrl');
                speed = 20;
            }
            switch (event.keyCode) {
                case 37:
                    //alert("向左"); left值减小
                    box1.style.left = box1.offsetLeft - speed + 'px'; // 在初始值的基础之上，减去 speed 大小
                    break;
                case 39:
                    //alert("向右");
                    box1.style.left = box1.offsetLeft + speed + 'px';
                    break;
                case 38:
                    //alert("向上");
                    box1.style.top = box1.offsetTop - speed + 'px';
                    break;
                case 40:
                    //alert("向下");
                    box1.style.top = box1.offsetTop + speed + 'px';
                    break;
            }
        };
    </script>
</body>

</html>